import { Form, Input, Modal, Row, Col, Cascader, Select, Radio, message } from "antd";
import { useEffect, useState } from "react";
import type { UserAddParams, UserInfoTypeList, UserList, buildingTypeList, housesTypeList } from "../../type/userinfo";
import UploadImg from "../upload/UploadImg";
import {userinfotypeList,housesList, buildingHouseId, userinfoAdd} from '../../apis/userinfo'

type Props = {
    editUserInfo: UserList,
    onCancel: () => void,
    building:buildingTypeList[],
    getUserInfoList:()=>void
}

function EAUserInfo({ editUserInfo, onCancel,building,getUserInfoList }: Props) {
    // 设置修改头像
    const uploadHandle = (url: string) => {
        form.setFieldValue("photo", url);
    }
    const [params,setParams]=useState<UserAddParams>({
      "address": 0,
      "buildingid": 0,
      "cardid": "",
      "houseid": 0,
      "houseno": "",
      "mobile": "",
      "name": "",
      "nation": "",
      "photo": "",
      "sex": 0,
      "usernative": "",
      "usertype": ""
  })
    const onFinish =async (values: UserList) => {
        let data = {...editUserInfo,...values,buildingid:params.buildingid,houseid:params.houseid}
        console.log(data);
        let res = await userinfoAdd(data)
        if (res.errCode==10000) {
          message.success(res.errMsg)
          getUserInfoList()
          onCancel()
        }
    }
    const onChange = (value: number[]) => {
      if(value!=undefined){
        params.buildingid = value[value.length-1]
        getHouseById(value[value.length-1])
      }else{
        setHouse([])
      }
    }
    const onChangeHouseId = (value: number[]) => {
      params.houseid = value[0]
    }
    const [form] = Form.useForm();
    useEffect(() => {
        getUserType()
        getHouse()
        form.setFieldsValue(editUserInfo)
    }, [])
    const getUserType=async ()=>{
      let res =await userinfotypeList()
      setUsertypes(res.data.list)
    }
    // 获取全部
    const getHouse=async ()=>{
      let res =await housesList()
      setHouse(res.data.list)
    }
    // 根据id获取房间
    const getHouseById=async (id:number)=>{
      let res =await buildingHouseId(id)
      setHouse(res.data.list)
    }
    const [usertypes,setUsertypes]=useState<UserInfoTypeList[]>()
    const [house,setHouse]=useState<housesTypeList[]>([])

    return (
        <Modal
        width={700}
            title={editUserInfo?.id ? '编辑居民' : '添加居民'}
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={true}
            onOk={() => { form.submit() }}
            onCancel={() => { onCancel() }}
        >
            <Form onFinish={onFinish} form={form} size="large" style={{ padding: '10px 50px' }}>
                <Row gutter={100}>
                    <Col span={12}>
                        <Form.Item<UserAddParams> name="photo" label="头像">
                            <UploadImg defaultImgUrl={editUserInfo?.photo} uploadHandle={uploadHandle} />
                        </Form.Item>
                        <Form.Item<UserAddParams> name="buildingid" label="楼栋" rules={[{ required: true, message: '请选择楼栋' }]}>
                          <Cascader allowClear key={'buildingid'} fieldNames={{label:'name',value:'id'}} onChange={onChange} options={building} placeholder="选择小区" />
                        </Form.Item>
                        <Form.Item<UserAddParams> name="houseid" label="房间" rules={[{ required: true, message: '请选择房间号' }]}>
                            <Cascader allowClear fieldNames={{label:'houseno',value:'id'}} onChange={onChangeHouseId} options={house} placeholder="请选择" />
                        </Form.Item>
                        <Form.Item<UserAddParams>
                            label="姓名" name="name" rules={[{ required: true, message: '请输入姓名!' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item<UserAddParams>
                            label="性别" name="sex">
                            <Radio.Group
                                options={[
                                    { value: 1, label: '男' },
                                    { value: 0, label: '女' }
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}> 
                        <Form.Item<UserAddParams>
                            label="民族" name="nation">
                            <Input />
                        </Form.Item>
                        <Form.Item<UserAddParams>
                            label="籍贯" name="usernative">
                            <Input />
                        </Form.Item>
                        <Form.Item<UserAddParams>
                            label="证件" name="cardid">
                            <Input />
                        </Form.Item>
                        <Form.Item<UserAddParams>
                            label="电话" name="mobile">
                            <Input />
                        </Form.Item>
                        <Form.Item<UserAddParams>
                            label="类型" name="usertype">
                            <Select allowClear fieldNames={{ label: 'name', value: 'id' }} options={usertypes} />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
}
export default EAUserInfo